<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .active{
            color: red;
        }
        .active1{
            font-size: 50px;
        }
        .active2{
            background-color: aquamarine;
        }
        .active3{
            border: 5px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 类 -->
        <div class="active active1 active2 active3">1111</div>
        <!-- 多个类名要放进数组中，逗号隔开 -->
        <div :class="[myClass, myClass1, myClass2, myClass3]">22222</div>


        <!-- 行内样式 -->
        <div style="background-color: pink;" :style="myStyle">行内样式</div>
    </div>



    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    myClass: 'active',
                    myClass1: 'active1',
                    myClass2: 'active2',
                    myClass3: 'active3',
                    myStyle: {color: '#fff', fontSize: '40px'}
                }
            }
        }).mount('#app')




    </script>
</body>

</html>